<template>
  <div class="add-page">
    <el-dialog :visible.sync="visible" width="80%" :close-on-click-modal="false" @close="$emit('close')">
      <div slot="title" class="header flex-between">
        <div class="flex-rowl">
          <div class="flex-rowl mr10 pointer" @click="$emit('close')">
            <i class="el-icon-switch-button color-fff mr5"></i>
            <span class="color-fff size-14">关闭</span>
          </div>
          <div class="flex-rowl mr10 pointer" @click="submit('draft')" v-if="type === 'add'">
            <i class="el-icon-finished color-fff mr5"></i>
            <span class="color-fff size-14">保存</span>
          </div>
          <div class="flex-rowl pointer" @click="submit('complete')" v-if="type === 'add'">
            <i class="el-icon-position color-fff mr5"></i>
            <span class="color-fff size-14">提交</span>
          </div>
        </div>
        <!-- <div class="flex-rowl pointer">
          <i class="el-icon-printer color-fff mr5"></i>
          <span class="color-fff size-14">打印</span>
        </div> -->
      </div>
      <div class="title">请假申请流程</div>
      <div>
        <div class="flex-between mt40 mb10">
          <span class="size-12">当前状态：
            <!-- <span class="str b2" v-if="businessStatus == 'UNDO'">在办</span>
            <span class="str b2" v-else-if="businessStatus == 'AUDIT'">审批</span>
            <span class="str" v-else-if="businessStatus == 'DRAFT'">草稿</span>
            <span class="str" v-else-if="businessStatus == 'REBACK'">撤回</span>
            <span class="str b3" v-else-if="businessStatus == 'DONE'">办结</span>
            <span class="str b3" v-else-if="businessStatus == 'AUDITED'">已审批</span>
            <span class="str b3" v-else-if="businessStatus == 'FINISH'">已归档</span> -->
            <span class="str b3">发起申请</span>
          </span>
          <span class="size-12">业务单编号：{{ formData.businessId }}</span>
        </div>
        <!-- 表单 -->
        <ZfwFormAdd :formData="formData" :fileds="fileds" ref="formAddRef" />
        <div class="mt24"></div>
        <div class="mb10 size-14" v-if="Array.isArray(formData.auditItems) && formData.auditItems.length">
          处理意见</div>
        <!-- 处理意见渲染 -->
        <div class="message" v-if="Array.isArray(formData.auditItems) && formData.auditItems.length">
          <div class="flex-rowl message-item" v-for="item in formData.auditItems" :key="item.id">
            <div class="size-14 hed">审批意见</div>
            <div class="flex-1 content">
              <div class="size-14 mb8">{{ item.memo }}</div>
              <div class="flex-rowr size-14 mr10">{{ item.operatorName }} {{ item.completeTime }}</div>
            </div>
          </div>
        </div>
        <template v-if="subFileds.length">
          <ZfwFormAdd :formData="formData" :fileds="subFileds" ref="formSubAddRef"
            :style="{ marginTop: this.type === 'add' ? '20px' : '0px' }" />
        </template>
        <!-- 附件表格 -->
        <div class="mt16 mb10 size-14">附件展示</div>
        <ZfwFileTable :files="formData.busiAttachs" :businessId="formData.businessId" @upload="handleUpload"
          :disabled="type !== 'add'" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ZfwFormAdd from "@/components/zfw-common/zfw-form-add/index"
import ZfwFileTable from "@/components/zfw-common/zfw-file-table/index.vue"
import Mixin from "./config/addMixin.js"
import { getDetail, save, getTaskDetail } from "@/api/leaveApplication.js"
import { replaceFormData, getIdsData, disPerson } from "@/utils/common.js"
import { formData } from "./options.js"
export default {
  components: { ZfwFormAdd, ZfwFileTable },
  mixins: [Mixin],
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""  // wait==>待处理的处理
    }
  },

  data() {
    return {
      formData,
      fileList: []
    }
  },
  async created() {
    await this.getPerson();
    await this.init()
  },
  methods: {
    // 附件上传
    handleUpload(fileList) {
      this.fileList = fileList
    },
    // 获取参数
    getParams(formData) {
      let auditorIds = ""
      let auditorNames = ""
      if (this.formData.businessStatus === "UNDO") {
        const { idStr, nameStr } = getIdsData(formData.auditorIds, this.personList)
        auditorIds = idStr
        auditorNames = nameStr
      }
      const busiAttachIds = this.fileList.map(t => t.id)
      return {
        ...this.formData,
        busiAttachIds: busiAttachIds.join(','),
        auditorIds,
        auditorNames
      }
    },
    // 保存
    async submit(type) {
      const valid = await this.$refs.formAddRef.validate()
      if (valid) {
        const params = this.getParams(this.formData)
        let res = {}
        if (type === 'draft') {
          res = await save(type, replaceFormData(params))
        } else {
          if (this.formData.businessStatus !== 'UNDO' && this.formData.businessStatus !== 'DONE') {
            this.$message.error("请选择路径")
            return
          }
          if (this.formData.businessStatus === 'UNDO' && !this.formData.auditorIds.length) {
            return this.$message.error("请选择审批人")
          }
          res = await save(type, replaceFormData(params))
        }
        if (res.code === 200) {
          this.$message.success(`${type === 'draft' ? '保存成功' : '提交成功'}`)
          this.$emit('close')
        }
      }
    },
    // 初始化数据
    async init() {
      const { code, data } = await getDetail({ id: this.id })
      if (code === 200) {
        const datas = {
          ...data.auditInfo,
          ...data,
        }
        for (const key in this.formData) {
          this.formData[key] = datas[key]
        }
        this.formData.auditorIds = disPerson(datas.auditorIds, this.personList) || []
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.message {
  border: 1px solid #CFCCCC;

  .message-item {
    border-bottom: 1px solid #CFCCCC;

    &:last-child {
      border-bottom: none;
    }
  }
}

.header {
  background-color: #2D75D7;
}

.hed {
  font-weight: 700;
  color: #606266;
  width: 125px;
  text-align: right;
  padding-right: 10px;

}

.content {
  padding: 10px;
  border-left: 1px solid #CFCCCC;
}

.title {
  color: #555555;
  font-size: 24px;
  text-align: center;
}
</style>
